<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/head.css">
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
</head>
<body>
<div class="page-header" style="margin-top: 0px">
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle <navigati></navigati>on</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">HOOC</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a id="index" onclick="toIndex()">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a onclick="toVIP()" style="cursor:pointer;">会员中心</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" id="keyWord"/>
                    </div>
                    <button type="submit" class="btn btn-default" id="selectCourse">搜索</button>
                </form>
                <!--用户未登录-->
                <ul id="unLoginUser" class="nav navbar-nav navbar-right" style="display: block">
                    <li><a onclick="toLogin()">登录</a></li>
                    <li><a onclick="toRes()">注册</a></li>
                    <li><a onclick="toCart()">购物车</a></li>
                    <li><a onclick="toDetails()">个人中心</a></li>
                </ul>
                <!--用户登录-->
                <ul id="loginUser" class="nav navbar-nav navbar-right" style="display: none">
                    <li><a id="test"><p>{name}</p></a></li>
                    <li><a onclick="LoginOut()">退出</a></li>
                    <li><a onclick="toCart()">购物车</a></li>
                    <li><a onclick="toDetails()">个人中心</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>

<script>
    $(function () {
        $("#selectCourse").click(function () {
            let keyWord = $("#keyWord").val();
            if (keyWord == false) {
                alert("查询内容不可以为空哦！");
            } else {
                console.log("keyWord:" + keyWord);
                // window.open("select.html?keyWord="+keyWord);
                let param = "select.html?keyWord=" + keyWord;
                top.location.href = param;
            }
        });
    })
</script>
<script>
    $(function () {
        loadUserInfo();
    });

    function loadUserInfo() {
        let user = getLoginUser();
        let loginUser = document.getElementById("loginUser");
        let noLogin = document.getElementById("unLoginUser");
        if (user == null) {
            loginUser.style.display = "none";
            noLogin.style.display = "block";
        } else {
            $("#test").html(user.name);
            loginUser.style.display = "block";
            noLogin.style.display = "none";
        }
    }

    function LoginOut() {
        //移除用户信息
        removeLoginUser();
        localStorage.clear();
        /*localStorage.removeItem("login_user");*/
        console.log()
        //跳转页面
        // window.open("index.html");
        top.location.href = "index.html";
    }

    function toIndex() {
        top.location.href = "index.html";
    }

    function toLogin() {
        top.location.href = "userLogin.html";
    }

    function toRes() {
        top.location.href = "register.html";
    }

    function toCart() {
        top.location.href = "shopping.html";
    }

    function toDetails() {
        top.location.href = "userDetails.html";
    }

    function toVIP() {
        top.location.href = "vipPage.html";
    }
</script>
</body>
</html>